import { createRouter, createWebHashHistory } from 'vue-router'
import store from '@/store/index'

/**
 * meta对象中各个字段的含义
 *  --isShowTabbar是否显示底部tabbar
 *  --transition页面过渡动画
 */
const routes = [
  {
    path: '/',
    name: 'index',
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/pages/home/index.vue'),
    meta: {
      isShowTabbar: true,
    },
    children: [
      {
        path: '/homemin',
        name: 'homemin',
        component: () => import('@/pages/homemin/indx.vue'),
      },
    ],
  },
  {
    path: '/search',
    name: 'search',
    component: () => import('@/pages/search/index.vue'),
    meta: {
      isShowTabbar: true,
    },
  },
  {
    path: '/mine',
    name: 'mine',
    component: () => import('@/pages/mine/index.vue'),
    meta: {
      isShowTabbar: true,
    },
  },
  {
    path: '/setting',
    name: 'setting',
    component: () => import('@/pages/setting/index.vue'),
    meta: {
      isShowTabbar: true,
    },
  },
  {
    path: '/homemin2',
    name: 'homemin2',
    component: () => import('@/pages/homemin/index.vue'),
    meta: {
      transition: 'slide-right',
    },
  },
  {
    path: '/:pathMatch(.*)*',
    name: '404',
    component: () => import('@/pages/404.vue'),
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes,
})

router.beforeEach((to, from, next) => {
  console.log('to:', to)
  if (to.meta.isShowTabbar) {
    store.commit('isShowTabbar', { showTabbar: true })
  } else {
    // 进入到非tabbar页时，隐藏tabbar
    store.commit('isShowTabbar', { showTabbar: false })
  }
  next()
})

export default router
